<template>
    <div class="full-screen-layout">
        <Header></Header>
        <div class="main-layout">
            <div class="left-side">
                <div class="left-side-content">
                    <h2 class="left-side-content-header">
                        家长中心
                    </h2>
                    <div class="left-side-content-body">
                        <a v-for="item in menuItems" :key="item.key" href="#"
                            :class="{ active: activeMenu === item.key }" @click="handleMenuClick(item.key)">
                            <p class="text">{{ item.label }}</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="right-side">
                <component :is="activeComponent"></component>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import Student_List from '@/components/Student_List.vue';
import Content_Management from '@/components/Content_Management.vue'; // 假设有其他组件
import Study_Plan from '@/components/Study_Plan.vue';
import Study_Report from '@/components/Study_Report.vue';
import Task_Management from '@/components/Task_Management.vue';
import Review_Plan from '@/components/Review_Plan.vue';
import Study_Management from '@/components/Study_Management.vue';

// 菜单项数据
const menuItems = [
    { key: 'student', label: '学生管理', component: Student_List },
    { key: 'study_management', label: '学习管理', component: Study_Management },
    { key: 'content', label: '内容管理', component: Content_Management },
    { key: 'study_plan', label: '学习计划', component: Study_Plan },
    { key: 'task', label: '任务管理', component: Task_Management },
    { key: 'review', label: '复习计划', component: Review_Plan },
    { key: 'study_report', label: '学习报告', component: Study_Report },
];

// 当前选中的菜单项
const activeMenu = ref('student');

// 当前显示的组件
const activeComponent = computed(() => {
    const item = menuItems.find((item) => item.key === activeMenu.value);
    return item ? item.component : null;
});

// 处理菜单点击事件
const handleMenuClick = (key) => {
    activeMenu.value = key;
};
</script>

<style scoped>
    @import url('@/assets/css/parent_management_page.css');

</style>